<template>
	<view class="content">
		<view class="content_a">
			<view class="search">
				<view class="search_left">
					<uni-icons type="search" color="#fff" style="margin-left: 27rpx;margin-right: 12rpx;"></uni-icons>
					<input style="background-color: #FFFFFF;" placeholder="请输入您所需要的产品名称" @input="srchSubmission" v-model="name" @click="(closeShow = true), (show = true)" />
					<text class="cuIcon-close" style="margin: 0 20rpx;" v-if="closeShow" @click="shutDn"></text>
				</view>
				<view class="search_right">
					<image src="../../../static/custServ11.png" style="color: red;"></image>
					<button class="cu-btn" open-type="contact">客服</button>
				</view>
			</view>
		</view>
		<view class="hst shadow" >
			<view class="text">
				<text class="srchFor margin text-shadow">搜索历史</text>
				<text class="clear margin" @click="clearSrch">清除历史</text>
			</view>

			<view class="list" >
				<text class="deit text-shadow padding" v-for="(item, index) in dataa" :key="index" @click="clkHst(item.search)">{{ item.name }}</text>
			</view>
		</view>
		<view class="hst shadow" v-if="show">
			<view class="textt">
				<view v-for="(item, index) in data" :key="index" class="content_b padding" @click="jumpDetails(item.id)">
					<text class="cuIcon-search"></text>
					<text class=" margin-left-sm  text-shadow text-df text-black">{{ item.search }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data:[],
			dataa:[],
			show:true,
			closeShow:true,
			name:''
		};
	},
	onShow() {},
	onLoad(e) {
		this.getSrchTerms()
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},

	methods: {
		shutDn(){
			this.show = true
			this.name = ''
		},
		//用户搜索提交
		async srchSubmission(){
			 let obj = {
			     uid: uni.getStorageSync("uid"),
				 name :this.name,
				 page:1,
				 limit:99
			 };
			 const res = await this.$u.post("api/user/user_save_search",obj,{});
			 if (res.code==1) {
				this.show = !this.show
				this.dataa = res.data;
				console.log('this.dataa :>> ', this.dataa);
			 }
			 
			 uni.$showMsg(res.msg) 
			 console.log("res >>  ", res);
			 
		},
		// 获取搜索词
		async getSrchTerms(){
			let obj = {
			    uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post("api/user/search",obj,{});
			
			this.data = res.data;
			console.log("获取搜索词 >>  ", res);
			 
		},
		//清除搜索历史 
		async clearSrch(){
			if (!this.data.length) return uni.$showMsg('暂无搜索词 !');
			let obj = {
			     uid: uni.getStorageSync("uid"),
			 };
			 const res = await this.$u.post("api/user/search_clear",obj,{});
			 if (!res.code) return uni.$showMsg();
			 this.data = res.data;
			 console.log("res >>  ", res);
			 
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding-top: 24rpx;
	width: 100vw;
	height: 100vh;
	background-color: #F5F8FD;
	.content_a {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

		.search {
			display: flex;
			flex-flow: row;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 19rpx;

			.search_left {
				border: 1rpx solid #999;
				overflow: hidden;
				width: 624rpx;
				height: 60rpx;
				display: flex;
				flex-flow: row;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				opacity: 0.6;
				border-radius: 30px;
				margin-right: 19rpx;

				input {
					width: 100%;
					font-size: 24rpx;
				}
			}

			.search_right {
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #16b998;

				image {
					width: 40rpx;
					height: 38rpx;
				}
				.cu-btn {
					width: 40rpx;
					height: 25rpx;
					white-space: nowrap;
				}
			}
		}
	}
	.hst {
		margin: 0 auto;
		width: 690rpx;
		background: #fff;
		border-radius: 10rpx;

		.text {
			display: flex;
			justify-content: space-between;
			.srchFor {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
			}
			.clear {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		}
		.textt {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 30rpx;
			.content_b {
				width: 100%;
				margin:  0  20rpx;
				border-bottom: 1rpx solid #ccc;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			//justify-content: space-between;
			.deit {
				//padding: 14rpx 21rpx;
				margin: 0 20rpx;
				width: 100%;
				border-bottom: 1rpx solid #CCCCCC;
				display: block;
				// border-radius: 10rpx;
				// height: 22rpx;
				line-height: 22rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				//margin-bottom: 20rpx;
				// margin-left: 20rpx;
				background-color: #ffffff;
				color: #000000;
			}
		}
	}
}
</style>
